<!--
 * @Description:
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2021-11-24 15:10:50
 * @LastEditors: zhj1214
 * @LastEditTime: 2022-02-08 10:29:37
-->
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { onBeforeUnmount, onMounted } from "vue";
import { STORAGE } from "@utils/constant";
import { NNotificationProvider, NMessageProvider, NDialogProvider } from "naive-ui";

// import HelloWorld from "./components/HelloWorld.vue";
import { MessageContent } from "@/components/MessageContent";
import { NotifiContent } from "@/components/NotifiContent";
import { DialogContent } from "@/components/DialogContent";

// this.$store.dispatch("getAreaCityInfor"); 	// 获取城市数据信息
let beforeUnload_time = 0;

onMounted(() => {
  window.addEventListener("beforeunload", beforeunloadFn);
  window.addEventListener("unload", beforeonunload);
});

onBeforeUnmount(() => {
  window.removeEventListener("beforeunload", beforeunloadFn);
  window.removeEventListener("unload", beforeonunload);
});

const beforeunloadFn = function (e) {
  e = e || window.event;
  // 兼容IE8和Firefox 4之前的版本
  localStorage.setItem("e", JSON.stringify(e));
  // if (e) {
  //     e.returnValue = "关闭提示111"
  // }
  // 默认刷新页面
  // localStorage.setItem("pageStatus", "1")
  // 记录时间
  beforeUnload_time = new Date().getTime();
  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  // return "关闭提示111"
};
const beforeonunload = function () {
  var gap_time = new Date().getTime() - beforeUnload_time;
  localStorage.setItem("gap_time_close", gap_time);
  // 判断是窗口关闭还是刷新
  if (gap_time <= 5) {
    // 如果是登录状态，关闭窗口前，移除用户 ,必须发送同步请求
    // localStorage.setItem("pageStatus", "0")
    localStorage.removeItem(STORAGE.TOKEN);
    console.log("你关闭了浏览器");
  }
};
</script>

<template>
  <div id="app">
    <router-view />
  </div>
  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
  <n-dialog-provider>
    <n-message-provider>
      <MessageContent></MessageContent>
      <n-notification-provider>
        <NotifiContent />
        <n-notification-provider>
          <NotifiContent />
        </n-notification-provider>
      </n-notification-provider>
    </n-message-provider>
    <DialogContent />
  </n-dialog-provider>
</template>

<style lang="scss">
@import url("./style/common.scss");
</style>
